<template>
  <div class="betRecordBox">
    <div class="recTitle">
      <div class="recTitItem" :class="{on:recTitIdex == curRecTitIndex}" @click="recTitleEvent(recTitIdex)"
           v-for="(recTitItem,recTitIdex) in recTitleData">{{recTitItem}}
      </div>
    </div>
    <div class="recContent">
      <div class="myRecord relative" v-if="curRecTitIndex==0">
        <div class="myBetRecItem myBetRecTit displayFlex">
          <p v-for="myBetRecItem in myBetRecTitData">{{myBetRecItem}}</p>
        </div>
        <div class="myBetRecCon scrollBar">
          <ul v-if="curRecTitIndex==0">
            <li class="myBetRecItem displayFlex" v-for="myBetRecItem in myBetRecData">
              <p>{{myBetRecItem.lotteryName}}</p>
              <p>{{myBetRecItem.playedGroupName}}-{{myBetRecItem.playedName}}</p>
              <p>{{myBetRecItem.actionNo}}</p>
              <p>{{myBetRecItem.actionData}}</p>
              <p>{{myBetRecItem.amount}}</p>
              <p>{{myBetRecItem.bonus}}</p>
              <p>{{myBetRecItem.statusText}}</p>
              <p><a href="javascript:void(0);" v-if="myBetRecItem.status=='1'"
                    @click="cancelTheOrder(myBetRecItem.orderId)">撤单</a>
                <router-link :to="{name: 'recordDetail',query:{orderId: myBetRecItem.orderId,treeIndex: '2'}}"
                             v-else>详情
                </router-link>
              </p>
            </li>
          </ul>
        </div>
      </div>
      
      <ul class="hisRecList clearFiex" v-if="curRecTitIndex==1">
        <li class="hisRecItem floatLeft" v-for="(hisRecItem,hisRecIndex) in hisRewardData" v-if="hisRecIndex<10">
          <p>{{hisRecItem.number}}期</p>
          <p class="clearFiex" v-if="_Format.formatCode($route.query.code).baccarat">
                  <span class="floatLeft">
                    <img :src="bankerIcon" alt="">
                    <img :src="_Modulation.getSmallCard(hisRecItem.wave[resIndex],resItem?resItem:'?')" alt=""
                         v-for="(resItem,resIndex) in hisRecItem.data" v-if="resIndex<2">
                  </span>
            <span class="floatRight">
                     <img :src="_Modulation.getSmallCard(hisRecItem.wave[resIndex],resItem?resItem:'?')" alt=""
                          v-for="(resItem,resIndex) in hisRecItem.data" v-if="resIndex>1">
                    <img :src="idleIcon" alt="">
                  </span>
          </p>
          <p v-if="_Format.formatCode($route.query.code).bigWheel" class="relative">
            <b class="bigWhe absmiddle" :class="{'red': _Format.lotColor(hisRecItem.data[0], $route.query.code) === 'red', 'black': _Format.lotColor(hisRecItem.data[0], $route.query.code) === 'black'}">{{hisRecItem.data[0]}}</b>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import './main.scss';
  import {mapState} from 'vuex';
  
  export default {
    data() {
      return {
        bankerIcon: require('../../../assets/images/theColor/baccarat/icon/banker.png'),
        idleIcon: require('../../../assets/images/theColor/baccarat/icon/idle.png'),
        myBetRecTitData: ['彩种', '玩法', '期号', '投注号', '投注金额(元)', '中奖金额(元)', '状态', '操作'],
        recTitleData: ['我的投注', "历史开奖"],
        curRecTitIndex: 0,
        hisRewardData: [],//历史开奖数据
        myBetRecData: [],//我的投注记录数据
      }
    },
    computed: {
      ...mapState({
        hisRewData: state => state.mutations.hisRewData,
      }),
    },
    mounted() {
    },
    activated() {
    },
    deactivated() {
    },
    methods: {
      initData() {
        //历史开奖数据
        this.hisRewardData = this.hisRewData || [];
      },
      //投注记录导航切换
      recTitleEvent(index) {
        this.curRecTitIndex = index;
      },
      //我的投注记录
      getMyBetRecData() {
        let that = this;
        let startTime = that._Util.currentDateYear(0);
        let params = {
          pageSize: 10,
          pageNum: 1,
          status: '',
          lotteryCode: '',
          startStr: startTime,
          endStr: startTime,
        };
        that._Util.post(that, that._Api.POST_LOTTERY_BTEEING_DATA, params, (data) => {
          that.myBetRecData = data.result;
        }, '', 0, true);
      },
      //撤单
      cancelTheOrder(oder) {
        let that = this;
        if (that.whetherToSeal) {
          that._Util.showAlert('已封盘');
          return;
        }
        let params = {
          orderId: oder
        };
        that._Util.post(that, that._Api.POST_CANCER_ORDER_DATA, params, (data, oldData) => {
          if (parseInt(oldData.code) === -1) {
            that._Util.showAlert(oldData.msg);
            return;
          }
          that._Util.showAlert('撤单成功');
          that.getMyBetRecData();
        }, '', 'post');
      },
    },
    components: {},
    watch: {
      'hisRewData'() {
        this.initData();
      },
    }
  }
</script>

<style lang="css" rel="styleheet/css" scoped>

</style>